<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			<uni-section title="违章费用明细" type="line">
				<view class="formContainer" v-if="settlementList.length > 0">
					<view class="listItem" v-for="(item,index) in settlementList" :key="index">
						<view class="infoLine flex-row-center-sb">
							<text>违章单据号</text>
							<text>{{item.documentNo}}</text>
						</view>
						<view class="infoLine flex-row-center-sb">
							<text>罚款</text>
							<text>{{item.illegalFines}}元</text>
						</view>
						<view class="infoLine flex-row-center-sb">
							<text>扣分</text>
							<text>{{item.pointsDeduction}}</text>
						</view>
						<view class="infoLine flex-row-center-sb">
							<text>违章手续费</text>
							<text>{{item.illegalPoundage}}元</text>
						</view>
						<view class="infoLine flex-row-center-sb">
							<text>处理状态</text>
							<text> {{ item.processingStatus|processingStatus }}</text>
						</view>
						<view>
							<uni-forms ref="form">
								<uni-forms-item label="违章服务费" labelWidth="160" required>
									<u--input :placeholder="item.deductions" type="digit" v-model="item.deductions">
									</u--input>
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
				</view>
				<view v-else class="formContainer">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
				</view>
			</uni-section>
			<uni-section title="违章处理" type="line">
				<view class="formContainer">
					<uni-forms ref="form">
						<uni-forms-item label="违章合计">
							<view class="flex-row-center-sb" style="position: relative;top: 20rpx;">
								<text>{{vehicleDamageTotal}}元</text>
							</view>
						</uni-forms-item>
						<uni-forms-item label="结算方式" required>
							<uni-data-checkbox v-model="formData.settlementMethod" :localdata="settlementMethods" />
						</uni-forms-item>
						<!-- 选择押金抵扣 -->
						<block v-if="formData.settlementMethod == 1">
							<uni-table ref="table" :loading="loading" border stripe>
								<uni-tr>
									<uni-th width="100" align="center"><text style="color: #2879FF;">支付方式</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">已付金额</text>
									</uni-th>
									<uni-th width="100" align="center"><text style="color: #2879FF;">抵扣金额</text>
									</uni-th>
								</uni-tr>
								<uni-tr v-for="(item, index) in depositList" :key="index">

									<uni-td align="center">{{ item.paymentMethod }}</uni-td>
									<uni-td align="center">{{ item.paidAmount }}</uni-td>
									<uni-td align="center" v-if="item.type==3">{{ supplementary }}</uni-td>
									<uni-td align="center" v-else>
										<uni-easyinput v-model="item.deductionsAmount" :clearable="false" type="number"
											@input="changeDeductionsAmount(item, $event)">
											{{item.deductionsAmount}}
										</uni-easyinput>
									</uni-td>
								</uni-tr>
							</uni-table>
						</block>

					</uni-forms>
				</view>
			</uni-section>
		</view>

		<button type="info" class="sub-btn" @click="OverDepositSettlement">违章处理</button>
	</view>
</template>

<script>
	import * as orderApi from '@/api/order-api.js';
	export default {

		data() {
			return {
				orderNo: null,
				settlementList: [],
				depositList: [],
				settlementMethods: [{
					value: 2,
					text: '单独收费'
				}],
				formData: {
					settlementMethod: 2,
				}

			}
		},
		computed: {
			// 计算车损总和
			vehicleDamageTotal() {
				let total = 0
				this.settlementList.forEach(item => {
					total += Number(item.deductions)
				})
				return total.toFixed(2)
			},
			// 计算抵扣费用
			deduction() {
				let total = 0
				this.depositList.forEach(item => {
					if (item.type < 3) {
						total += Number(item.deductionsAmount)
					}
				})
				return total.toFixed(2)
			},
			// 计算补缴费用
			supplementary() {
				let total = Number(this.vehicleDamageTotal - this.deduction).toFixed(2)
				this.depositList.forEach(item => {
					if (item.type == 3) {
						item.deductionsAmount = total
					}
				})
				return total < 0 ? 0 : total
			}
		},
		onLoad(option) {
			const item = JSON.parse(decodeURIComponent(option.item));
			this.order = item;
			this.orderNo = this.order.orderNo;
			this.doDepositRefundDetail();
		},
		methods: {
			doDepositRefundDetail() {
				orderApi.IllegalProcessing(this.orderNo).then(response => {
					this.settlementList = response.data.settlementList || [];
					this.depositList = response.data.depositList || [];
					if (this.depositList.length > 1 && this.vehicleDamageTotal > 0) {
						this.settlementMethods.push({
							value: 1,
							text: '违章押金抵扣'
						})

					}
				});
			},
			// 修改抵扣押金
			changeDeductionsAmount(item, e) {
				const vehicleDamageTotal = Number(this.vehicleDamageTotal);
				const input = Number(e);
				const paidAmount = Number(item.paidAmount);
				if(paidAmount > vehicleDamageTotal){//已付金额大于违章合计
					if (input > vehicleDamageTotal) {
						item.deductionsAmount = vehicleDamageTotal;
					}
				}else {
					if (input > paidAmount) {
						item.deductionsAmount = paidAmount;
					}
				}
				
				
				
			},
			/** 确认违章押金结算退款 */
			OverDepositSettlement() {
				for (let item of this.settlementList) {
					if (!item.deductions) {
						uni.$u.toast('费用不能为空')
						return;
					}
				}
				if (this.settlementMethod == 1 && this.deduction <= 0) {
					uni.$u.toast('押金抵扣费用为0,请选择单独缴费')
					return;
				}
				if (this.supplementary < 0) {
					uni.$u.toast('请检查押金抵扣金额')
					return;
				}
				if(this.checkDeductionsAmount()) {
					this.submitBtnLoading = true
					
					orderApi.OverIllegalDeposit({
						orderNo: this.orderNo,
						carIllegalList: this.settlementList,
						deductions: this.depositList,
						settlementMethod: this.formData.settlementMethod
					}).then(response => {
						uni.$emit('refreshOrder');
						uni.$u.toast(response.msg)
						uni.navigateBack({
					
						})
					});
				}
				
			},
			// 校验抵扣金额
			checkDeductionsAmount() {
				if(this.depositList.length >0) {
					var total = 0;
					this.depositList.forEach(item=>{
						total +=  Number(item.deductionsAmount);	
					})
					if(total>Number(this.vehicleDamageTotal)){
						uni.$u.toast('抵扣金额不能大于违章费用合计,请检查抵扣金额');
						return false
					}else {
						return true
					}
				}else {
					return true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}

	.listItem {
		border: 1rpx solid #F5F5F5;
		padding: 16rpx;
		margin-bottom: 20rpx;

		.infoLine {
			padding: 8rpx 0;
			font-size: 26rpx;
			color: #333;
		}

	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>
